<template>
  <el-card class="box-card">
    <div class="expire">
      <div class="expire_header">
        <h4>已过期/即将过期的店铺</h4>
      </div>
      <div class="expire_body">
        <div v-for="(item, index) in listData" :key="index" class="item">
          <img alt="image" width="35" height="35" src="@/assets/image/pdd.png">
          <div class="media_body">
            <div>{{ item.shopName }}
            </div>
          </div>
          <div class="media_body_text">
            <el-button type="text" style="color: #ed143d; font-weight: bold;">店铺已不可用</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { queryExpireShopList } from "@/api/product/productInfo";


export default {
  name: "product",
  components: {},
  data() {
    return {
      listData: []
    };
  },

  created() {
    this.queryExpireShopList()
  },
  methods: {
    queryExpireShopList(){
      queryExpireShopList().then(res => {
        console.log('res', res);
        this.listData = res.value || []
      })
    }
  }
};
</script>

<style lang="scss" scope>
.expire {
  box-sizing: border-box;
  height: 300px;
  overflow-y: auto;

  .expire_header {
    width: 100%;
    padding: 10px 25px;

    h4 {
      font-size: 16px;
      color: #6c757d;
    }
  }

  .expire_body {
    padding-top: 10px !important;
    padding-bottom: 20px;

    .item {
      border-bottom: 1px solid #f9f9f9;
      padding-bottom: 15px;
      margin-bottom: 10px;
      display: flex;
      -ms-flex-align: start;
      -webkit-box-align: start;
      align-items: flex-start;

      img {
        display: inline-block;
        margin-right: 10px;
      }

      .media_body {
        flex: 1;
        line-height: 35px;
        height: 35px;
      }
    }
  }
}
</style>